<template>
  <div class="app-container">
    <el-page-header @back="$router.back()" content="订单详情" />
    <el-steps :active="activeStep" finish-status="success" align-center style="margin: 16px 0;">
      <el-step title="买家下单" :description="baseInfo.orderTimeText" />
      <el-step title="买家付款" />
      <el-step title="商户发货" />
      <el-step title="交易完成" />
    </el-steps>

    <el-row :gutter="16">
      <el-col :span="12">
        <el-card shadow="never" header="收货信息">
          <div>收货人：{{ baseInfo.receiverName }}</div>
          <div>手机：{{ baseInfo.receiverPhone }}</div>
          <div>地址：{{ baseInfo.receiverAddress || '-' }}</div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never" header="付款信息">
          <div>付款金额：¥{{ baseInfo.paymentAmount }}</div>
          <div>付款方式：{{ baseInfo.paymentMethod || '-' }}</div>
          <div>付款时间：{{ baseInfo.paymentTimeText || '-' }}</div>
        </el-card>
      </el-col>
    </el-row>

    <el-card style="margin-top:16px;" shadow="never" header="商品信息">
      <el-table :data="items" border>
        <el-table-column prop="goodsName" label="商品" />
        <el-table-column prop="goodsPrice" label="价格" width="120" />
        <el-table-column prop="goodsQuantity" label="数量" width="100" />
        <el-table-column label="状态" width="140">
          <template slot-scope="scope">{{ scope.row.orderStatus || baseInfo.orderStatus || '-' }}</template>
        </el-table-column>
        <el-table-column label="小计" width="140">
          <template slot-scope="scope">¥{{ (Number(scope.row.goodsPrice)||0) * (Number(scope.row.goodsQuantity)||0) }}</template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
  
</template>

<script>
import { getDingdanguanli } from '@/api/dingdanguanli/dingdanguanli'

export default {
  name: 'OrderDetail',
  data() {
    return {
      orderId: this.$route.query.orderId,
      baseInfo: {},
      items: [],
      activeStep: 1
    }
  },
  created() {
    // 先用路由携带的状态让页面即时响应
    const routeStatus = this.$route.query.orderStatus
    if (routeStatus) {
      this.baseInfo.orderStatus = routeStatus
      this.activeStep = this.calcStep(routeStatus)
    }
    this.fetch()
  },
  watch: {
    '$route.query.orderStatus'(val) {
      if (val) {
        this.baseInfo.orderStatus = val
        this.activeStep = this.calcStep(val)
      }
    }
  },
  methods: {
    fetch() {
      if (!this.orderId) return
      getDingdanguanli(this.orderId).then(res => {
        const data = res.data || {}
        this.baseInfo = {
          ...data,
          orderTimeText: data.orderTime ? this.parseTime(data.orderTime, '{y}-{m}-{d} {h}:{i}:{s}') : '-'
        }
        // 后端示例结构为单行商品，如有多商品可替换为 data.items
        this.items = [data]
        this.activeStep = this.calcStep(this.baseInfo.orderStatus || data.orderStatus)
      })
    },
    calcStep(status) {
      switch (status) {
        // 让绿色进度线停在对应节点：
        // 待付款 -> 买家下单；待发货 -> 买家付款；已发货 -> 商户发货；已完成 -> 交易完成
        case '待付款': return 1
        case '待发货': return 2
        case '已发货': return 3
        case '已完成': return 4
        default: return 1
      }
    },
    parseTime(time, cFormat) {
      // 轻量兜底，复用全局过滤器时可移除
      if (!time) return null
      const date = new Date(time)
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds()
      }
      const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
      return format.replace(/\{(y|m|d|h|i|s)\}/g, (result, key) => {
        let value = formatObj[key]
        if (String(value).length < 2) {
          value = '0' + value
        }
        return value
      })
    }
  }
}
</script>

<style scoped>
</style>


